<template>
    <page-box class="custom-page-box">
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
        </template>
        <page-search>
            <page-search-column class="fixed-column">
                <page-search-item>
                    <el-input class="pbb__search-input" v-model="form.name" placeholder="表单名称" clearable></el-input>
                </page-search-item>
                <page-search-item>
                    <el-cascader
                        v-if="_isOperation"
                        class="pbb__search-input"
                        v-model="form.cityCode"
                        :options="options"
                        :props="props"
                        placeholder="所在镇"
                        clearable
                        @visible-change="visibleChange"
                        @change="cascaderChange"
                        :key="key">
                    </el-cascader>
                </page-search-item>
                <page-search-item>
                    <el-button type="primary" class="pbb__search-btn" @click="getTable">查询</el-button>
                </page-search-item>
                <page-search-item>
                    <el-button class="pbb__search-btn" @click="toImport">导入</el-button>
                </page-search-item>
            </page-search-column>
        </page-search>
        <div class="task-manage-container">
            <el-table
                v-show="tableData.length"
                class="pbb__table"
                header-cell-class-name="pbb__table-thead"
                cell-class-name="pbb__table-thead-cell"
                row-class-name="pbb__table-thead-row"
                :data="tableData"
                style="width: 100%;height: 100%;background: #fff;overflow-y: auto;">
                <el-table-column
                    label="序号"
                    align="center"
                    type="index"
                    :index="indexMethod"
                    width="60">
                </el-table-column>
                <el-table-column
                    prop="formName"
                    label="表单名称">
                </el-table-column>
                <el-table-column
                    prop="updateTime"
                    label="最新导入时间">
                </el-table-column>
                <el-table-column
                    prop="total"
                    label="数据量">
                </el-table-column>
                <el-table-column
                    prop="cityCodeName"
                    label="所属镇">
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="创建时间">
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="toDetail(scope.row)">详情</el-button>
<!--                        <el-button size="mini" type="text" @click="toDelete(scope.row)">删除</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <ask-empty-text
                style="min-height: 400px;"
                v-if="tableData.length === 0">
            </ask-empty-text>
        </div>
        <template v-slot:footer v-if="total > 0">
            <pagination :total="total" :page.sync="pageIndex" :limit.sync="pageSize" @pagination="getTable"/>
        </template>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { State } from "vuex-class";

@Component({
    name: "ImportCreateListNotAlive"
})
export default class ImportCreateList extends Vue {
    @State(state => state.authArea) authArea: any;
    // 当前用户所处层级菜单
    get client() {
        return this.$getUserLevel(this.authArea && this.authArea.orgCategoryId).name;
    }

    form: any = {
        name: "",
        cityCode: ""
    }

    tableData: any[] = []
    total = 0
    pageIndex = 1
    pageSize = 10
    options: any[] = []
    props = {
        checkStrictly: true,
        value: 'code',
        label: 'name',
        lazy: true,
        lazyLoad: async(node: any, resolve: any) => {
            if (node.level < 4) {
                const res: any = await this.getOptions(node.value);
                resolve(res);
            } else {
                resolve([]);
            }
        }
    }

    propsTown = {
        checkStrictly: true,
        value: 'code',
        label: 'name'
    }

    key = 0


    get _isOperation() {
        return ['ADMIN', 'OPERATION_ADMIN', 'OPERATION'].includes(this.client);
    }

    created() {
        this.getTable();
        if (!this._isOperation) {
            this.getTownOptions();
        }
    }

    async getTownOptions() {
        const res = await this.$server["retrieval/byCode"]({
            data: { code: this.authArea.cityCode }
        });
        if (res.data.code === 200) {
            this.options = res.data.data.filter((item: any) => item.code === this.authArea.cityCode);
            this.options[0].children = res.data.data.filter((item: any) => item.code !== this.authArea.cityCode);
        }
    }

    async getOptions(code?: any) {
        let list: any[] = [];
        const res = await this.$server["userList/getArea"]({
            data: {
                code: code || ""
            },
            loader: false
        });
        if (res.data.code === 200) {
            list = res.data.data;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
        return list;
    }

    searchData() {
        this.pageIndex = 1;
        this.getTable();
    }

    // 查询表格
    async getTable() {
        const res = await this.$server["importCreate/getTable"]({
            data: {
                pageSize: this.pageSize,
                currentPage: this.pageIndex,
                formName: this.form.name || "",
                cityCode: this.form.cityCode ? this.form.cityCode[this.form.cityCode.length - 1] : ""
            }
        });
        if (res.data.code === 200) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    toImport() {
        this.$router.push("/import-create/import");
    }

    toDetail(row: any) {
        this.$router.push({
            path: "/import-create/detail",
            query: {
                formId: row.id,
                name: row.formName,
                description: row.description
            }
        });
    }

    toDelete(row: any) {
        this.$confirm("删除后，导入数据将会同步删除", "确认要删除这条信息吗?")
            .then(async() => {
                const res = await this.$server["importCreate/deleteTable"]({
                    data: {
                        formId: row.id
                    }
                });
                if (res.data.code === 200) {
                    this.$message.success("删除成功");
                    this.getTable();
                } else {
                    this.$message.error(res.data.message || "接口请求错误!");
                }
            })
            .catch();
    }

    indexMethod(index: any) {
        return index + 1 + (this.pageIndex - 1) * this.pageSize;
    }

    visibleChange(show: any) {
        if (!show && !this.form.cityCode.length) {
            this.key++;
        }
    }

    cascaderChange() {
        if (!this.form.cityCode.length) {
            this.key++;
        }
    }
}
</script>

<style lang="scss" scoped>

</style>
